/*
 * @Description: 功能栏
 * @Author: Zzt
 * @Date: 2022-11-27 09:52:32
 * @LastEditTime: 2022-12-05 11:35:41
 */
import { Button, Form, Input, Select, Space } from 'antd';

import classNames from 'classnames/bind';
import { useMemo, useState } from 'react';
import { useAccountContext } from '../contexts/AccountContext';
import styles from '../styles/operate.module.scss';
import AddReport from './dialogs/AddReport';

const cx = classNames.bind(styles);
const Operate = () => {
  const [form] = Form.useForm();
  const { selectItems, deleteReportFunc } = useAccountContext();
  const [addReportVisible, setAddReportVisible] = useState(false);
  const onChange = (change: any, value: any) => {
    console.log(value);
  };
  return (
    <div className={cx('classify-detail-header')}>
      <div className={cx('title')}>年报管理</div>
      <div className={cx('operate')}>
        <Form form={form} onValuesChange={onChange} colon={false} layout="inline">
          <Form.Item label="年度" name="year" key="year">
            <Select
              defaultValue="全部"
              style={{ width: 120 }}
              options={[
                {
                  value: 'jack',
                  label: 'Jack'
                },
                {
                  value: 'lucy',
                  label: 'Lucy'
                },
                {
                  value: 'Yiminghe',
                  label: 'yiminghe'
                }
              ]}
            />
          </Form.Item>
          <Form.Item label="状态筛选" name="type" key="type">
            <Select
              defaultValue="全部"
              style={{ width: 120 }}
              options={[
                {
                  value: 'jack',
                  label: 'Jack'
                },
                {
                  value: 'lucy',
                  label: 'Lucy'
                },
                {
                  value: 'Yiminghe',
                  label: 'yiminghe'
                }
              ]}
            />
          </Form.Item>
          <Form.Item label="年报查询" name="name" key="name">
            <Input placeholder="快捷查询" />
          </Form.Item>
        </Form>
      </div>
      <div>
        <Space>
          <Button
            onClick={() => {
              setAddReportVisible(true);
            }}
          >
            +新建
          </Button>
          <Button
            disabled={selectItems.length === 0}
            onClick={() => {
              deleteReportFunc(selectItems, '是否删除选中的台账');
            }}
          >
            删除
          </Button>
          <Button disabled={selectItems.length === 0}>导出</Button>
          <Button disabled={selectItems.length === 0}>报表打印</Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddReport
            visible={addReportVisible}
            onClose={() => {
              setAddReportVisible(false);
            }}
          />
        ),
        [addReportVisible]
      )}
    </div>
  );
};
export default Operate;
